<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>基于Bootstrap3的简单柱状图表插件|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库</title>
	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="css/default.css">
	<link rel="stylesheet" href="css/main.css">
</head>
<body>
ss="container">

			<div id="population_chart" data-sort="false" data-width="800" class="jChart chart-lg" name="North American Regional Population Loss 2014">
				<div class="define-chart-row" data-color="#84d6ff" title="Arizona">500000</div>
				<div class="define-chart-row" data-color="#38BCFF" title="New Mexico">217500</div>
				<div class="define-chart-row" data-color="#00A9FF" title="Nevada">119000</div>
				<div class="define-chart-row" data-color="#008DD3" title="Colorado">78000</div>
				<div class="define-chart-row" data-color="#0074AA" title="Utah">466000</div>
				<div class="define-chart-row" data-color="#005882" title="California">326000</div>
				
				<div class="define-chart-footer">100000</div>
				<div class="define-chart-footer">200000</div>
				<div class="define-chart-footer">300000</div>
				<div class="define-chart-footer">400000</div>
				<div class="define-chart-footer">500000</div>
			</div>
			<h1>Javascript Usage</h1>
			<hr>
			<p>You can create a basic bar chart on an html element by calling .jChart() on a JQuery object or collection.
			<pre class="prettyprint">
				<code language="language-javascript">
$("#population_chart").jChart({
	name: "North American Regional Population Loss 2014",
	headers: ["Arizona","Michigan","Ontario","British Columbia","Texas"],
	values: [250000,478000,88000,429000,423000],
	footers: [100000,200000,300000,400000,500000],
	colors: ["#1000ff","#006eff","#00b6ff","#00fff6","#00ff90"]
});
				</code>
			</pre>
			<p>All parameters except for the values are optional. The HTML would look like this:</p>
			<pre class="prettyprint">
				<code language="language-html">
&lt;div id="population_chart"&gt;&lt;/div&gt;
				</code>
			</pre>
			<h1>HTML Usage</h1>
			<hr>
			<pre class="prettyprint">
				<code language="language-html">
&lt;div id="bar_of_pies" data-sort="true" data-width="300" class="jChart chart-sm" name="My Favorite Pies"&gt;
	&lt;div class="define-chart-row" data-color="red" title="Pumpkin"&gt;13&lt;/div&gt;
	&lt;div class="define-chart-row" data-color="gray" title="Pecan"&gt;24&lt;/div&gt;
	&lt;div class="define-chart-row" data-color="green" title="Cherry"&gt;17&lt;/div&gt;
	&lt;div class="define-chart-row" data-color="orange" title="Apple"&gt;26&lt;/div&gt;
	&lt;div class="define-chart-row" data-color="black" title="Rhubarb"&gt;12&lt;/div&gt;
	&lt;div class="define-chart-row" data-color="blue" title="Chocolate Cream"&gt;8&lt;/div&gt;

	&lt;div class="define-chart-footer"&gt;10&lt;/div&gt;
	&lt;div class="define-chart-footer"&gt;20&lt;/div&gt;
	&lt;div class="define-chart-footer"&gt;30&lt;/div&gt;
&lt;/div&gt;
				</code>
			</pre>
			<p>Then simply call $("#bar_of_pies").jChart(); without any options specified to generate the chart like below:</p>

			<div id="colors_chart" data-sort="true" data-x_label="% of Total Love of Pies" data-width="300" class="chart-sm" name="My Favorite Pies">
				<div class="define-chart-row" data-color="#ffb600" title="Pumpkin">13</div>
				<div class="define-chart-row" data-color="#966510" title="Pecan">24</div>
				<div class="define-chart-row" data-color="#cc0000" title="Cherry">17</div>
				<div class="define-chart-row" data-color="#59e000" title="Apple">26</div>
				<div class="define-chart-row" data-color="#990077" title="Rhubarb">12</div>
				<div class="define-chart-row" data-color="#603000" title="Chocolate Cream">8</div>

				<div class="define-chart-footer">10</div>
				<div class="define-chart-footer">20</div>
				<div class="define-chart-footer">30</div>
			</div>
		</div>
		<footer class="related">
		    <h3>如果你喜欢这个插件，那么你可能也喜欢:</h3>
		    <a href="http://www.htmleaf.com/jQuery/Chart/201503231564.html">
			  <img src="related/1.jpg" width="300" alt="HTML5 Canvas简单实用的图表插件-Chart.js"/>
			  <h3>HTML5 Canvas简单实用的图表插件-Chart.js</h3>
			</a>
			<a href="http://www.htmleaf.com/jQuery/Chart/20141119527.html">
			  <img src="related/2.jpg" width="300" alt="html5和jQuery动态饼状图表插件"/>
			  <h3>html5和jQuery动态饼状图表插件</h3>
			</a>
		</footer>
	</article>
	
	<script src="js/jquery-2.1.1.min.js"></script>
	<script src="https://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
	<script src="js/jchart.js"></script>
	<script>
		$(document).ready(function() {
			$("#population_chart").jChart({x_label:"Population"});
			$("#colors_chart").jChart();
		});
	</script>
</body>
</html>